{% extends "base.html" %}

{% load article_tags %}

{% load staticfiles %}

{% block title %}{{ article.title }}{% endblock %}

{% block content %}

{% with total_likes=article.users_like.count users_like=article.users_like.all %}

<div class="container">
    <div class="col-md-9">
        <header>
            <h1>{{ article.title }}</h1>
            <p>
                <a href="{% url 'article:author_articles' article.author.username %}">
                    {{ article.author.username }}
                </a>
                <span style="margin-left:20px" class="glyphicon glyphicon-thumbs-up">{{ total_likes }}</span>
                <span style="margin-left:20px">{{ total_views }}浏览量</span>
            </p>
            <p>
                <span style="margin-right: 10px;"><strong>标签:</strong></span>{{ article.article_tag.all | join:", " }}
            </p>
        </header>

        <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}" />
        <div id='editormd-view'>
            <!-- <textarea id="append-test" style="display:none;">
{{ article.body }}  这里不需要对齐
            </textarea> -->
{{ article.body | markdown }}
        </div>
        <div>
            <p class="text-center">
                <a onclick="like_article({{article.id}}, 'like')" href="#"><span class="glyphicon glyphicon-thumbs-up">like</span></a> 
                <a onclick="like_article({{article.id}}, 'unlike')" href="#"><span style="margin-left: 15px;" class="glyphicon glyphicon-thumbs-down">unlike</span></a>
            </p>
        </div>
        <div>
            <p class="text-center"><strong>点赞本文的读者</strong></p>    
            {% for user in article.users_like.all %}
            <p class="text-center">{{ user.username }}</p>
            {% empty %}  
            <p class="text-center">还没有人对此文章表态</p>
            {% endfor %}
        </div>
        <hr>
        <div>
            <h3><span class="glyphicon glyphicon-bullhorn"></span>本文有{{ article.comments.count }}评论</h3>
            {% for comment in article.comments.all %}
            <div>
                <p><strong>{{ comment.commentator }}</strong>说：</p>
                <p style="margin-left:40px;">{{ comment.body }}</p>
            </div>
            {% empty %}
            <p>没有评论</p>
            {% endfor %}
    
            <h3><span class="glyphicon glyphicon-send"></span>看文章，发评论，不要沉默</h3>
            <form action="." method="post" class="form-horizontal" role="form">{% csrf_token %}
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">评论员</label>
                    <div class="col-sm-10">
                        {{ comment_form.commentator}}
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">评论</label>
                    <div class="col-sm-10">
                        {{ comment_form.body }}
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <p><input type="submit" name="" value="发评论" class="btn btn-primary"></p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="col-md-3">
        <p class="text-center"><h3>最受欢迎文章</h3></p>
        <ol>
            {% for article_rank in most_viewed %}
            <li>
                <a href="{{ article_rank.get_url_path }}">{{ article_rank.title }}</a>
            </li>
            {% endfor %}
        </ol>
        <hr>
        <p class="text-center"><h3>最新文章</h3></p>
        {% latest_articles 10 %}
        <hr>
        <p class="text-center"><h3>最多评论文章</h3></p>
        {% most_commented_articles as most_comments %}
        <ul>
            {% for comment_article in most_comments %}
            <li>
                <a href="{{comment_article.get_url_path}}">{{ comment_article.title }}</a>
            </li>
            {% endfor %}
        </ul>
        <hr>
        <p class="text-center"><h3>推荐相似文章</h3></p>
        {% for similar in similar_articles %}
        <p><a href="{{ similar.get_url_path }}">{{ similar.title }}</a></p>
        {% empty %}
        <p>抱歉，没有相似文章</p>
        {% endfor %}
    </div>
</div>
<script src='{% static "js/jquery.js" %}'></script>
<script src='{% static "editor/lib/marked.min.js" %}'></script>
<script src='{% static "editor/lib/prettify.min.js" %}'></script>
<script src='{% static "editor/lib/raphael.min.js" %}'></script>
<script src='{% static "editor/lib/underscore.min.js" %}'></script>
<script src='{% static "editor/lib/sequence-diagram.min.js" %}'></script>
<script src='{% static "editor/lib/flowchart.min.js" %}'></script>
<script src='{% static "editor/lib/jquery.flowchart.min.js" %}'></script>
<script src='{% static "editor/editormd.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
    $(function(){
        editormd.markdownToHTML("editormd-view", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
    });

    function like_article(id,action){
        $.ajax({
            url: "{% url 'article:like_article' %}",
            type: "POST",
            data: {"id":id, "action":action},
            success: function(e){
                if(e=="1"){
                    layer.msg("感谢点赞");
                    window.location.reload();
                }else{
                    layer.msg("我会继续努力");
                    window.location.reload();
                }
            },
        });
    }
</script>
{% endwith %}  
{% endblock %}